﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>运行概况</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="../assets/css/font-awesome-4.7.0.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bootstrap-4.1.0.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/siteserver-1.0.7.min.css" rel="stylesheet" type="text/css" />
    <style>
        .primary-color {
            color: #00b19d;
        }
        .circliful-chart {
            width: 90px;
            height: 90px;
            border-radius: 45px;
            text-align: center;
            background: #3bafda;
        }
        .circliful-chart span{
            font-size: 1.3rem;
            color: #ffffff;
            line-height: 90px;
        }
    </style>
</head>
<body>
    <div id="main" class="m-t-15 m-b-15 m-l-15 m-r-15">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title-box">
                    <h4 class="page-title">运行概况</h4>
                </div>
            </div>
        </div>

        <template v-if="pageLoad">
            <div class="row">
                <div class="col-sm-6 col-lg-3">
                    <div class="widget-simple-chart text-right card-box">
                        <div class="circliful-chart">
                            <span>学员</span>
                        </div>
                        <h3 class="text-success counter m-t-10">{{accountCount}}</h3>
                        <p class="text-muted text-nowrap m-b-10">学员人数</p>
                    </div>
                </div>

                <div class="col-sm-6 col-lg-3">
                    <div class="widget-simple-chart text-right card-box">
                        <div class="circliful-chart" style="background-color: #00b19d;">
                            <span>课程</span>
                        </div>
                        <h3 class="text-primary counter m-t-10">{{courseCount}}</h3>
                        <p class="text-muted text-nowrap m-b-10">开设课程</p>
                    </div>
                </div>

                <div class="col-sm-6 col-lg-3">
                    <div class="widget-simple-chart text-right card-box">
                        <div class="circliful-chart" style="background-color: #f76397;">
                            <span>活动</span>
                        </div>
                        <h3 class="text-pink m-t-10"><span class="counter">{{activityCount}}</span></h3>
                        <p class="text-muted text-nowrap m-b-10">组织活动</p>
                    </div>
                </div>

                <div class="col-sm-6 col-lg-3">
                    <div class="widget-simple-chart text-right card-box">
                        <div class="circliful-chart" style="background-color: #4c5667;">
                            <span>报名</span>
                        </div>
                        <h3 class="text-inverse counter m-t-10">{{enrollmentCount}}</h3>
                        <p class="text-muted text-nowrap m-b-10">报名人次</p>
                    </div>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="text-center" style="margin-top: 100px">
                <img class="mt-3" src="../assets/images/loading.gif" />
                <p class="lead mt-3 text-nowrap">载入中，请稍后...</p>
            </div>
        </template>
    </div>
</body>
</html>
<script src="../assets/lib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../assets/lib/layer/layer-3.1.1.js" type="text/javascript"></script>
<script src="../assets/lib/sweetalert2-7.28.4.all.min.js" type="text/javascript"></script>
<script src="../assets/lib/vue-2.6.10.min.js" type="text/javascript"></script>
<script src="../assets/lib/axios-0.18.0.min.js"></script>

<script src="../assets/js/utils.js" type="text/javascript"></script>
<script src="dashboard.js" type="text/javascript"></script>